<template>
  <view class="container">
    <!-- 主按钮 -->
    <button class="main-btn" @click="handleMainButtonClick">开启今日</button>

    <!-- 卡片弹窗 -->
    <view v-if="showCard" class="card-mask" @click="showCard = false">
      <view class="card-container" @click.stop>
        <text class="close-btn" @click="showCard = false">×</text>
        <image class="card-image" :src="cardData.imageUrl" mode="aspectFill" @click="goToDetail"></image>
        <view class="card-content" @click="goToDetail">
          <text class="card-title">{{ cardData.title }}</text>
        </view>

        <view class="action-btns">
          <view class="btn-item" @click="toggleLike">
            <text :style="{ color: cardData.isLiked ? '#ff0000' : '#333' }">❤</text>
            {{ cardData.likeCount }}
          </view>
        <!--  <view class="btn-item" @click="toggleCollect">
            <text :style="{ color: cardData.isCollected ? '#ffd700' : '#333' }">★</text>
            {{ cardData.collectCount }}
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showCard: false,
      cardData: {
        _id: "",
        title: "",
        imageUrl: "",
        description: "",
        likeCount: 0,
        collectCount: 0,
        isLiked: false,
        isCollected: false
      }
    };
  },
  methods: {
    // 主按钮点击事件
    async handleMainButtonClick() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo) {
        uni.showModal({
          title: '未登录',
          content: '请先登录',
          success: (res) => {
            if (res.confirm) {
              uni.switchTab({ url: '/pages/mine/mine' });
            }
          }
        });
        return;
      }
      
      try {
        const res = await uniCloud.callFunction({
          name: 'get-card',
          data: { userId: userInfo._id }
        });
        
        if (res.result.code === 200) {
          this.cardData = res.result.data;
          this.showCard = true;
        } else {
          uni.showToast({ title: res.result.message, icon: 'none' });
        }
      } catch (e) {
        uni.showToast({ title: '获取卡片失败', icon: 'none' });
      }
    },

    // 跳转到详情页
    goToDetail() {
      uni.navigateTo({
        url: '/pages/card-detail/card-detail?data=' + encodeURIComponent(JSON.stringify(this.cardData))
      });
    },

    // 点赞操作
    async toggleLike() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo) return;

      try {
        const res = await uniCloud.callFunction({
          name: 'like-card',
          data: {
            cardId: this.cardData._id,
            userId: userInfo._id
          }
        });

        if (res.result.code === 200) {
          this.cardData.likeCount++;
          this.cardData.isLiked = true;
        } else {
          uni.showToast({ title: res.result.message, icon: 'none' });
        }
      } catch (e) {
        uni.showToast({ title: '操作失败', icon: 'none' });
      }
    },

    // 收藏操作
    async toggleCollect() {
      const userInfo = uni.getStorageSync('userInfo');
      if (!userInfo) return;

      try {
        const res = await uniCloud.callFunction({
          name: 'collect-card',
          data: {
            cardId: this.cardData._id,
            userId: userInfo._id
          }
        });

        if (res.result.code === 200) {
          this.cardData.collectCount++;
          this.cardData.isCollected = true;
        } else {
          uni.showToast({ title: res.result.message, icon: 'none' });
        }
      } catch (e) {
        uni.showToast({ title: '操作失败', icon: 'none' });
      }
    }
  }
};
</script>

<style scoped>
.container {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url('https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/background.png');
  background-size: cover;
  background-position: center;
}

.main-btn {
  width: 400rpx;
  height: 100rpx;
  line-height: 100rpx;
  position: fixed;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50rpx;
  color: #2c3e50;
  font-size: 36rpx;
  box-shadow: 0 8rpx 16rpx rgba(0,0,0,0.1);
  transition: all 0.3s;
}

.card-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-container {
  width: 600rpx;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  animation: popup 0.3s ease;
}

.close-btn {
  position: absolute;
  right: 20rpx;
  top: 10rpx;
  font-size: 50rpx;
  color: #666;
  z-index: 1;
}

.card-image {
  width: 100%;
  height: 400rpx;
}

.card-content {
  padding: 20rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.card-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.5;
}

.action-btns {
  display: flex;
  justify-content: flex-end;
  padding: 20rpx;
  border-top: 1rpx solid #eee;
}

.btn-item {
  margin-left: 30rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
}

.btn-item text {
  margin-right: 10rpx;
  font-size: 40rpx;
}

@keyframes popup {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
</style>